<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('证券账号')" prop="securityAccount">
            <el-input v-model="form.securityAccount" readonly :placeholder="$t('证券账号')" show-word-limit maxlength="32">
              <template slot="append" icon="el-icon-search">
                <el-button
                  v-hasPermi="['listed:position:edit']"
                  type="primary"
                  icon=""
                  :disabled="form.id !== undefined"
                  size="mini"
                  @click="searchHandle('listedPositionHoldForm')"
                >{{ $t('选择证券账户') }}</el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('证券公司')" prop="securityName">
            <el-input v-model="form.securityName" disabled :placeholder="$t('证券公司')" show-word-limit maxlength="32" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('投资主体')" prop="investorName">
            <el-input v-model="form.investorName" disabled :placeholder="$t('投资主体')" show-word-limit maxlength="32" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('持仓股数(万股)')" prop="positionShare">
            <Money v-model="form.positionShare" :placeholder="$t('持仓股数(万股)')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="positionPrice">
            <span slot="label">
              {{ $t('持仓均价(元/股)') }}
              <el-tooltip :content="$t('(持仓均价=投资成本/持仓股数)')" placement="top">
                <i class="el-icon-question" />
              </el-tooltip>
            </span>
            <Money v-model="form.positionPrice" disabled :placeholder="$t('持仓均价(元/股)')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('投资成本') + $t('金额单位')" prop="investPrincipal">
            <Money v-model="form.investPrincipal" unit="w" :placeholder="$t('投资成本') + $t('金额单位')" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <!--保存 取消按钮-->
      <save-btn has-permi="listed:position" />
    </div>
    <!-- 查看证券账户列表 -->
    <el-dialog
      :title="$t('证券账户')"
      :visible.sync="listOpen"
      custom-class="homeForm"
      width="70%"
      :close-on-click-modal="false"
      :lock-scroll="false"
      append-to-body
    >
      <searchListedSecurityList ref="searchListedSecurityList" />
    </el-dialog>
  </div>
</template>

<script>
import {
  saveListedPositionHold,
  getListedPositionHold
} from '@/api/deal/listed/position/listedPositionHold'
import searchListedSecurityList from '@/views/deal/listed/base/searchListedSecurityList'
import { findByDealIdAndInvestorId } from '@/api/deal/investment/dealInvestment'

export default {
  components: {
    searchListedSecurityList
  },
  props: {
    listedId: {
      type: String,
      required: true,
      default: ''
    },
    dealId: {
      type: String,
      required: true,
      default: ''
    }
  },
  data() {
    return {
      // 表单参数
      form: {},
      // 遮罩层
      loading: false,
      listOpen: false,
      positionHoldList: [],
      // 表单校验
      rules: {
        securityAccount: [{ required: true, message: this.$t('必填信息'),	trigger: 'blur' }],
        positionShare: [{ required: true, message: this.$t('必填信息'),	trigger: 'blur' }],
        investPrincipal: [{ required: true, message: this.$t('必填信息'),	trigger: 'blur' }]
      }
    }
  },
  watch: {
    'form.positionShare'() {
      this.calPositionPrice()
    },
    'form.investPrincipal'() {
      this.calPositionPrice()
    },
    listedId: {
      handler(val) {
        this.form.listedId = val
      },
      deep: true,
      immediate: true
    },
    dealId: {
      handler(val) {
        this.dealId = val
      },
      deep: true,
      immediate: true
    }
  },
  created() {
  },
  methods: {
    // 初始化数据
    init(data) {
      if (data != null && data.id !== undefined) {
        getListedPositionHold(data.id).then(response => {
          this.form = response.data
        })
      } else {
        this.reset()
      }
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        listedId: this.listedId,
        securityId: undefined,
        positionShare: undefined,
        positionPrice: undefined,
        investPrincipal: undefined,
        createBy: undefined,
        createDate: undefined,
        updateBy: undefined,
        updateDate: undefined,
        delFlag: undefined,
        remark: undefined
      }
      this.resetForm('form')
    },
    // 持仓均价=投资成本 investPrincipal / 持仓股数 positionShare
    calPositionPrice() {
      if (this.form.positionShare !== undefined && this.form.positionShare !== null && this.form.positionShare !== '') {
        if (this.form.investPrincipal !== undefined && this.form.investPrincipal !== null && this.form.investPrincipal !== '') {
          if (this.form.positionShare !== 0) {
            this.form.positionPrice = this.form.investPrincipal / this.form.positionShare / 10000
          } else {
            this.$set(this.form, 'positionShare', '')
            this.$set(this.form, 'positionPrice', 0)
          }
        }
      }
    },
    /** 打开证券账户列表 */
    searchHandle(type) {
      this.listOpen = true
      this.$nextTick(() => {
        this.$refs.searchListedSecurityList.setType(type, this.positionHoldList)
      })
    },
    /** 设置list页面传递的list */
    setPositionHoldList(list) {
      this.positionHoldList = list
    },
    /** 选中证券账户数据回显处理 */
    listedPositionHoldHandle(data) {
      this.reset()
      if (data != null && data.id !== undefined) {
        this.form.securityAccount = data.securityAccount
        this.form.securityName = data.securityName
        this.form.investorName = data.investorName
        this.form.securityId = data.id
        this.form.investorId = data.investorId
        if (this.dealId !== null && this.dealId !== undefined) {
          findByDealIdAndInvestorId(this.dealId, this.form.investorId).then(response => {
            if (response.data != null) {
              this.form.positionShare = response.data.numberOfShares / 10000
              this.form.investPrincipal = response.data.amountInvestmentFact
              this.form.positionPrice = response.data.amountInvestmentFact / response.data.numberOfShares
            }
          })
        }
      }
    },
    // 取消按钮
    cancel() {
      this.$parent.$parent.formOpen = false
      this.$parent.$parent.reset()
    },
    // 关闭form页面
    closeForm() {
      // 关闭form页面遮罩层
      this.loading = false
      // 关闭form页面
      if (this.$parent.$parent.formOpen !== undefined) {
        this.$parent.$parent.formOpen = false
      }
      // 刷新list页面
      if (this.$parent.$parent.getList !== undefined) {
        this.$parent.$parent.getList()
      }
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loading = true
          saveListedPositionHold(this.form).then(response => {
            if (response.code === 200) {
              this.msgSuccess(this.$t('保存成功'))
              this.closeForm()
            } else {
              this.msgError(response.msg)
            }
            this.loading = false
          })
        } else {
          this.locationError(document)
        }
      })
    }

  }

}
</script>
